<template>
	<view>
		<mescroll-body :sticky="true" :up="upOption" background="#F5F6F8"  ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- <view class="column align-items-center" style="margin-top: 150rpx;" v-if="historys.length<1">
				<image src="/static/image_default@3x.png" style="width: 400rpx;" mode="widthFix"></image>
				<text style="margin-top: 60rpx;color: #A9A9A9;">还没有历史反馈消息哦</text>
			</view> -->
			<view class="f-content">
				<view class="f-item" v-for="(item,i) in historys" :key="i">
					<view class="f-t">投诉内容：{{item.feedback}}</view>
					<view class="f-t f-l">联系方式：{{item.userPhone || '无'}}</view>
					<view class="f-c">{{item.creationTime}}</view>
					<view v-if="item.imgurl" class="row" style="align-items: center;flex-wrap: wrap;">
						<view class="item-img" v-for="(item1,index) in item.imgList">
							<view class="item-video" v-if="(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(item1))">
								<video :disabled="false" :controls="false" :src="item1">
									<cover-view class="item-video-fixed" @click="previewVideo(item1)"></cover-view>
								</video>
							</view>
							<image style="width: 100%;height: 100%;" :src="item1" @tap="imgPreview(item.imgList,index)" mode="aspectFill"></image>
						</view>
					</view>
					<view v-if="item.replyTime" contents="回复时间:" class="f-t label-from" >{{item.replyTime}}</view>
					<view v-if="item.reply" contents="回复内容:" class="f-t label-from">{{item.reply}}</view>
				</view>
			</view>
		</mescroll-body>
		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoClose"> ×
				</cover-view>
			</video>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				historys: [],
				previewVideoSrc: '',
				upOption: {
					auto: true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					empty: {
						tip: '~ 暂无反馈记录 ~' // 提示
					}
				}
			};
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: "add-feedback"
			})
		},
		created() {
		},
		onShow() {
		},
		onBackPress() {
			if(this.previewVideoSrc){
				this.previewVideoSrc = ''
				return true
			}else {
				return false
			}
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			previewVideo(src) {
				this.previewVideoSrc = src;
				// this.previewVideoSrc =
				// 	'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-fbd63a76-dc76-485c-b711-f79f2986daeb/ba804d82-860b-4d1a-a706-5a4c8ce137c3.mp4'
			},
			previewVideoClose() {
				this.previewVideoSrc = ''
				console.log('previewVideoClose', this.previewVideoSrc)
			},
			imgPreview(imgData,index) {
				//console.log('imgPreview', index)
				uni.previewImage({
					urls: imgData,
					current: index,
					loop: true,
				});
			},
			async upCallback(page) {
				let result = await this.selectHistory(page)
				if (result) {
					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					this.mescroll.endBySize(result.list.length, result.total);
					
					//设置列表数据
					if (page.num == 1) this.historys = []; //如果是第一页需手动制空列表
					this.historys = this.historys.concat(result.list); //追加新数据
					this.historys.forEach(item =>{
						if(item.imgurl){
							item.imgList = item.imgurl.split(',')
						}
					})
				} else {
					this.mescroll.endErr();
				}
			},
			async selectHistory(page) {
				console.log(page)
				if(!page){
					page = {
						num:1,
						size
					}
				}
				try {
					const {
						data
					} = await this.$util.doPostForm(`/feedbcak/selectHistory1/${page.num}/${page.size}`, {}, {}, true)
					console.log("反馈记录",data)
					if (data.code = this.$ResponseStatus.OK) {
						return data.data
					} else { //接口请求失败的处理
						return false
					}
				} catch (e) {
					console.warn(e)
					return false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}
	
	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		video {
			width: 100%;
			height: 100%;
			z-index: 1002;
		}
		
		.preview-full-close {
			position: fixed;
			right: 32rpx;
			top: 25rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 60rpx;
			text-align: center;
			z-index: 1003;
			/* 	background-color: #808080; */
			color: #fff;
			font-size: 65rpx;
			font-weight: bold;
			text-shadow: 1px 2px 5px rgb(0,0,0);
			
		}
	}
	.f-content {
		margin: 20rpx;
	}

	.f-item {
		border-bottom: 1rpx solid #EEEEEE;
		padding: 10rpx 0;
	}

	.f-t {
		color: #3F536E;
		padding: 5rpx 0;
	}

	.f-c {
		color: #3F536E;
		font-size: 22rpx;
		padding: 5rpx 0;
	}

	.f-l {
		color: #F0AD4E;
	}
	
	.label-from {
		color: #ff0000;
		&:before {
			content: attr(contents);
			color: #000000;
			margin-right: 10rpx;
		}
	}
	
	.item-img{
		width: 210rpx;
		height: 210rpx;
		margin: 13rpx;
		border-radius: 10rpx;
		position: relative;
		video {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		.item-video {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
			position: relative;
			
			.item-video-fixed {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				z-index: 997;
			
			}
		}
	}
	
	
	
	
</style>
